<template>
  <a-row :gutter="[60, 0]" class="clearfix">
    <a-col class="title-en" style="margin-top: 40px">- About Us -</a-col>
    <a-col class="title-cn">关于我们</a-col>
    <a-col class="title-icon">
      <a-icon type="caret-down" />
    </a-col>
    <a-col class="description clearfix">
      <a-col span="6" class="description-text">
        <div class="sub-title">
          <i>COMPANY ORIENTATION</i>
          公司定位
        </div>
        <p>中国不动产延保专业服务商</p>
      </a-col>
      <a-col span="18" class="description-img">
        <img src="@/assets/images/orientation.png" alt />
      </a-col>
    </a-col>
    <!-- 保险合作方 -->
    <a-col class="description clearfix">
      <a-col span="24" class="description-text" style="height: initial">
        <div class="sub-title" style="margin-bottom: 10px">
          <i>INSURANCE PARTNER</i>
          保险合作方
        </div>
      </a-col>
      <a-col span="12" class="description-text-more">
        <div class="sub-title">
          PICC
          <i>中国人民财产保险股份有限公司</i>
        </div>
        <p>
          中国人民财产保险股份有限公司（PICC
          P&C，以下简称“人保财险”）的前身是1949年10月20日成立的中国人民保险公司，总部设在北京，是中国人民保险集团股份有限公司（PICC
          Group，美国《财富》世界“500强”第121位）的核心成员和标志性主业，是国内历史悠久、业务规模大、综合实力强的大型国有财产保险公司，保费规模居全球财险市场前列。
        </p>
      </a-col>
      <a-col span="12" class="description-text-more">
        <div class="sub-title">华泰保险经纪</div>
        <p>
          华泰保险经纪有限公司是公司是由国有特大型保险企业——中国再保险（集团）股份有限公司控股的中外合资企业，成立于1993年，是全国性专业保险中介服务企业，总部位于北京。
        </p>
      </a-col>
    </a-col>
    <!-- 企业文化 -->
    <a-col class="description corporate-culture clearfix">
      <a-col span="24" class="description-text" style="height: initial">
        <div class="sub-title" style="margin-bottom: 10px">
          <i>CORPORATE CULTURE</i>
          企业文化
        </div>
      </a-col>
      <a-col span="24">
        <a-row :gutter="[0, 0]" class="culture-list clearfix">
          <div class="culture-item">
            <img src="@/assets/images/culture-1.png" alt="" />
            <p>使命<i>Mission</i></p>
            <span>让居住更美好</span>
          </div>
          <div class="culture-item">
            <img src="@/assets/images/culture-2.png" alt="" />
            <p>愿景<i>Vision</i></p>
            <span>成为中国领先规模和品质的不动产延保服务商</span>
          </div>
          <div class="culture-item">
            <img src="@/assets/images/culture-3.png" alt="" />
            <p>价值观<i>Values</i></p>
            <span>价值至上、实事求是、开放创新</span>
          </div>
        </a-row>
      </a-col>
    </a-col>
    <!-- 大事记 -->
    <a-col class="description events clearfix">
      <a-col span="24" class="description-text" style="height: initial">
        <div class="sub-title">
          <i>EVENTS</i>
          大事记
        </div>
      </a-col>
      <a-col class="events-item" v-for="(e, i) in eventsList" :key="i">
        <span>{{ e.date }}</span
        ><em></em><i>{{ e.value }}</i>
      </a-col>
    </a-col>
    <!-- 合作伙伴 -->
    <a-col class="description partner clearfix">
      <a-col
        span="24"
        class="description-text"
        style="height: initial; margin-top: 15px"
      >
        <div class="sub-title">
          <i>Cooperative Partner</i>
          合作伙伴
        </div>
      </a-col>
      <a-col span="24">
        <img src="@/assets/images/partner-all.jpg" alt="" style="width: 100%" />
      </a-col>
    </a-col>
    <!-- 合作伙伴 -->
    <a-col class="description partner clearfix">
      <a-col
        span="24"
        class="description-text clearfix"
        style="margin-bottom: 10px; height: initial"
      >
        <div class="sub-title">
          <i>Activity Display</i>
          活动展示
        </div>
      </a-col>
      <a-col class="activity-list clearfix">
        <a-row :gutter="[10, 10]" class="activity-list">
          <a-col :span="6" class="activity-item" v-for="(e, i) in 8" :key="i">
            <img
              :src="`/public/images/activity-${i + 1}.png`"
              alt=""
              style="width: 100%; height: 180px; cursor: pointer"
            />
          </a-col>
        </a-row>
      </a-col>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: "AboutUs",
  data() {
    return {
      eventsList: [
        {
          date: "2017年12月",
          value: "江苏中延房屋维护技术服务股份有限公司注册成立",
        },
        {
          date: "2018年7月",
          value: "国内首款不动产延保产品——房延保正式面世",
        },
        {
          date: "2018年8月",
          value: "中延发布《中延房屋修缮技术规程白皮书》",
        },
        {
          date: "2018年9月",
          value: "中延发布《中延股份不动产维修运营管理白皮书》",
        },
        {
          date: "2018年10月",
          value: "房延保APP正式上线",
        },
        {
          date: "2018年12月",
          value: "推出家装延保产品",
        },
        {
          date: "2019年6月",
          value: "成为南京旅游业协会民宿分会常务理事单位",
        },
        {
          date: "2019年7月",
          value: "成为南京装饰行业协会会员",
        },
        {
          date: "2019年8月",
          value: "成为苏州装饰行业商会会员理事单位",
        },
        {
          date: "2019年9月",
          value: "水电隐蔽工程延保产品正式推出",
        },
        {
          date: "2020年5月",
          value:
            "管理后台2.0上线，在产品、订单、合同及维修管理模块做了同步的更新和完善，进一步提升了房延保业务的信息化管理水准",
        },
        {
          date: "2020年10月",
          value:
            "中延股份深度合作伙伴数量逾50家，在住宅、商业、公寓、办公等领域取得了全新的突破",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.partner-list {
  position: relative;
}
.partner-bg {
  width: 500px;
  position: absolute;
  height: 280px;
  z-index: 1;
  bottom: 0px;
  left: 15px;
}
.partner-item {
  z-index: 2;
}
</style>
